import { Scene } from '@babylonjs/core/scene';
import { AbstractControl, IAbstractControlOptions } from '../../../gui/control/abstract-control';
import { Control } from '@babylonjs/gui/2D/controls/control';
import { StackPanel } from '@babylonjs/gui/2D/controls/stackPanel';
import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock';
import { Utils } from '../../../tool/utils';
import { Image } from '@babylonjs/gui/2D/controls/image';


/**
 * 操作指导成员组件参数对象接口
 * @param imageUrl 图标
 * @param content 文字内容
 * @param debug 开启调试
 * @param fontSize 内容字体大小
 * @param fontFamily 内容字体
 * @param fontColor 内容颜色
 * @param imageWidth 图标宽
 * @param imageHeight 图标高
 * @param contentWidth 文字内容宽
 * @param contentHeight 文字内容高
 * @param spacing 间距
 */
interface IGuideItemOptions extends IAbstractControlOptions {
    imageUrl?: string,
    content?: string,
    debug?: boolean,
    fontSize?: number,
    fontFamily?: string,
    fontColor?: string,
    imageWidth?: number,
    imageHeight?: number,
    contentWidth?: number,
    contentHeight?: number,
    spacing?: number,
}


/**
 * 操作指导成员组件
 * @param name 名称
 * @param scene 所在场景
 * @param options 参数对象
 */
class GuideItem extends AbstractControl {

    /**
     * 图标控件
     */
    public header!: Image;
    /**
     * 文字内容控件
     */
    public content!: TextBlock;

    constructor(name: string, scene: Scene, options?: IGuideItemOptions) {
        super(name, scene, options);
    }

    protected bindEvent(control: Control, options: IAbstractControlOptions): void {
    }

    protected initializeControl(name: string, scene: Scene, options: IGuideItemOptions): Control {
        const panel = new StackPanel(name + '-panel');
        panel.isVertical = false;
        if (options.debug) panel.background = '#ff00ff';

        const fontSize = options.fontSize || 26;
        const fontColor = options.fontColor || '#ffffff';
        const fontFamily = options.fontFamily || 'Arial';
        const text = options.content || 'default';

        const img = new Image(name + '-image');
        img.source = options.imageUrl || null;
        img.stretch = Image.STRETCH_FILL;
        img.width = (options.imageWidth || fontSize) + 'px';
        img.height = (options.imageWidth || fontSize) + 'px';
        this.header = img;
        panel.addControl(img);

        const content = new TextBlock(name + '-content');
        content.text = text;
        content.fontFamily = fontFamily;
        content.color = fontColor;
        content.fontSize = fontSize + 'px';
        content.width = (options.contentWidth || (Utils.byteLength(text) * 0.5 * fontSize)) + 'px';
        content.height = (options.contentHeight || fontSize) + 'px';
        content.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
        content.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
        this.content = content;
        panel.addControl(content);

        const space = options.spacing || 5;

        content.paddingLeft = space + 'px';
        return panel;
    }

}


/**
 * 创建操作指导成员组件
 * @param name 名称
 * @param scene 所在场景
 * @param options 参数对象
 * @returns 操作指导成员组件
 */
const CreateGuideItem = (name: string, scene: Scene, options?: IGuideItemOptions): GuideItem => {
    const gdi = new GuideItem(name, scene, options);
    return gdi;
};


export { GuideItem, CreateGuideItem };
export type { IGuideItemOptions };